<script setup>
	import HeaderNavTabarSvg from '@/components/HeaderNavTabarSvg/HeaderNavTabar.vue'
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'

	import AuditApplicationSteps from '@/components/audit/function/auditApplicationSteps.vue'
	import DescriptionAttachment from '@/components/audit/function/descriptionAttachment.vue'
	import {
		ref
	} from 'vue'
	import dayjs from 'dayjs'
	import optionDeptPerson from '@/store/modules/optionDeptPerson'
	import {
		addFinancialApplyControllerApi
	} from '@/api/attendance'
	import {
		getUserProfile
	} from '@/api/system/user'
	import approvalProcessState from '@/store/modules/approvalProcess'
	import {
		isObjectValuesNotEmpty
	} from '@/utils/objIsnull.js'
	// 弃用
	const title = '出库申请单'

	const entertainDateRef = ref(null)
	const ItemRequisitionList = ref({
		date: '', // 申请日期
		outboundType: '', //出库类型
		outboundWarehouse: '', // 出库仓库
		administrator: '', //管理员
		proposer: '', //申请人
		phone: '', //联系电话
		outboundObject: '', //出库对象
		receiptNumber: '', //单据编号
		customerName: '', //客户名称
		customerPerson: '', //客户联系人
		customerAddress: '', //客户地址
		recipient: '', //领用人
		department: '', //所属部门
		reason: '',
		itemRequisitionDetail: [{
			inventoryName: '', // 存货名称
			specs: '', // 规格型号
			outboundNumber: '', // 出库数量
			unit: '', // 单位
		}, ],
		remark: ''
	})
	const userId = ref(null)
	const deptId = ref(null)
	let attchment = ref([])
	const getDesignDrawingsEmit = (emit) => {
		attchment.value = emit
	}
	const clickSave = async () => {
		const RequiredItemList = JSON.parse(JSON.stringify(ItemRequisitionList.value))
		delete RequiredItemList.remark
		console.log(RequiredItemList, 'RequiredItemList')
		if (isObjectValuesNotEmpty(RequiredItemList)) {
			let params = {
				purchaseNature: ItemRequisitionList.value.outboundType,
				date: dayjs(ItemRequisitionList.value.date).format('YYYY-MM-DD hh:mm:ss'),
				reason: ItemRequisitionList.value.reason,
				details: JSON.stringify(ItemRequisitionList.value.itemRequisitionDetail),
				remark: ItemRequisitionList.value.remark,
				ruleId: 'caigou',
				type: '采购申请',
				attchment: JSON.stringify(attchment.value),
				userId: userId.value,
				deptId: deptId.value,
				approve: approvalProcessState.state.approvalProcess
			}
			console.log(params, '采购申请提交params')
			let {
				code
			} = await addFinancialApplyControllerApi(params)
			if (code === 200) {
				uni.showToast({
					title: '提交成功',
					duration: 1500,
					icon: 'success',
				})
				setTimeout(() => {
					uni.navigateBack()
				}, 1000)
			}
		} else {
			uni.showToast({
				title: '请输入完整数据',
				icon: 'error'
			})
		}

	}
	const goHistoryView = () => {
		uni.navigateTo({
			url: '/components/TypeDefineModel?type=采购申请&apiName=财务'
		})
	}
	//出库类型选择
	const outboundTypeFn = () => {
		outboundTypeRef.value.open()
	}
	const outboundTypeRef = ref(null)
	const outboundTypeNumParams = ref(null)
	const outboundTypeColumns = [
		['订单出库', '材料出库', '行政出库']
	]
	const outboundTypeConfirm = (e) => {
		ItemRequisitionList.value.outboundType = e.value[0]
		// 审批绑定的费用承担部门  传参
		outboundTypeNumParams.value = e.indexs[0] + 1
	}
	//出库仓库选择
	const outboundWarehouseFn = () => {
		outboundWarehouseRef.value.open()
	}
	const outboundWarehouseRef = ref(null)
	const outboundWarehouseNumParams = ref(null)
	const outboundWarehouseColumns = [
		['南阳仓库', '邓州仓库']
	]
	const outboundWarehouseConfirm = (e) => {
		ItemRequisitionList.value.outboundWarehouse = e.value[0]
		// 审批绑定的费用承担部门  传参
		outboundWarehouseNumParams.value = e.indexs[0] + 1
	}
	
	
	//存货名称选择
	let inventoryNameIndex = ref('')
	let inventoryNameRef = ref(null)
	const inventoryNameFn = (index) => {
			inventoryNameRef.value[0].open()
			inventoryNameIndex.value = index
	}
	const inventoryNameNumParams = ref(null)
	const inventoryNameColumns = [
		['无人机', '电子围栏'],
	]
	const inventoryNameConfirm = (e) => {
		console.log(e);
		ItemRequisitionList.value.itemRequisitionDetail[inventoryNameIndex.value].inventoryName = e.value[0]
		// 审批绑定的费用承担部门  传参
		// inventoryNameNumParams.value = e.indexs[0] + 1
	}
	
	//规格型号选择
	let specsIndex = ref('')
	let specsRef = ref(null)
	const specsFn = (index) => {
			specsRef.value[0].open()
			specsIndex.value = index
	}
	const specsNumParams = ref(null)
	const specsColumns = [
		['A款', 'C款'],
	]
	const specsConfirm = (e) => {
		console.log(e);
		ItemRequisitionList.value.itemRequisitionDetail[specsIndex.value].specs = e.value[0]
		// 审批绑定的费用承担部门  传参
		// inventoryNameNumParams.value = e.indexs[0] + 1
	}
	
	//单位选择
	let unitIndex = ref('')
	let unitRef = ref(null)
	const unitFn = (index) => {
			unitRef.value[0].open()
			unitIndex.value = index
	}
	const unitNumParams = ref(null)
	const unitColumns = [
		['郑州', '武汉'],
	]
	const unitConfirm = (e) => {
		console.log(e);
		ItemRequisitionList.value.itemRequisitionDetail[unitIndex.value].unit = e.value[0]
		// 审批绑定的费用承担部门  传参
		// inventoryNameNumParams.value = e.indexs[0] + 1
	}
	
	//出库对象选择
	const outboundObjectFn = () => {
		outboundObjectRef.value.open()
	}
	const outboundObjectRef = ref(null)
	const outboundObjectNumParams = ref(null)
	const outboundObjectColumns = [
		['下载', '安装']
	]
	const outboundObjectConfirm = (e) => {
		ItemRequisitionList.value.outboundObject = e.value[0]
		// 审批绑定的费用承担部门  传参
		outboundObjectNumParams.value = e.indexs[0] + 1
	}
	
	//客户名称选择
	const customerNameFn = () => {
		customerNameRef.value.open()
	}
	const customerNameRef = ref(null)
	const customerNameNumParams = ref(null)
	const customerNameColumns = [
		['张三', '李四']
	]
	const customerNameConfirm = (e) => {
		ItemRequisitionList.value.customerName = e.value[0]
		// 审批绑定的费用承担部门  传参
		customerNameNumParams.value = e.indexs[0] + 1
	}

	const formatter = (type, value) => {
		if (type === 'year') {
			return `${value}年`
		}
		if (type === 'month') {
			return `${value}月`
		}
		if (type === 'day') {
			return `${value}日`
		}
		if (type === 'hour') {
			return `${value}时`
		}
		if (type === 'minute') {
			return `${value}分`
		}
		return value
	}

	const entertainDateFn = () => {
		entertainDateRef.value.open()
	}
	let entertainDatePicker = dayjs()
	const entertainDateConfirm = (obj) => {
		ItemRequisitionList.value.date = dayjs(obj.value).format('YYYY-MM-DD')
	}


	const copyDetailItem = () => {
		ItemRequisitionList.value.itemRequisitionDetail.push({
			inventoryName: '', // 存货名称
			specs: '', // 规格型号
			unit: '', // 单位
			outboundNumber: '', // 出库数量
		})
		console.log(ItemRequisitionList.value.itemRequisitionDetail);
	}
	const deleteDetailItem = (index) => {
		ItemRequisitionList.value.itemRequisitionDetail.splice(index, 1)
	}
	const getUserProfileFn = async () => {
		let {
			code,
			data
		} = await getUserProfile()
		if (code === 200) {
			userId.value = data.userId
			deptId.value = data.deptId
		}
	}

	onLoad(() => {
		getUserProfileFn()
	})
</script>

<template>
	<view>
		<!--   采购申请  -->
		<HeaderNavTabarSvg :title="title">
			<image class="bukaSvg" src="/static/icon/auditSVG/buka.svg" @tap="goHistoryView"></image>
		</HeaderNavTabarSvg>

		<!-- <view class="textarea-box">
      <text class="info-list-left isrequired">申请事由</text>
      <textarea
        v-model="ItemRequisitionList.reason"
        class="textinfo-list"
        placeholder="请输入"
      ></textarea>
    </view> -->
		<view class="picker-content" @tap="entertainDateFn">
			<view class="measurement-info-list">
				<text class="info-list-left isrequired">申请日期</text>
				<view class="info-list-right">
					<view class="uni-input" v-if="ItemRequisitionList.date">{{ ItemRequisitionList.date }}
					</view>
					<view class="uni-inputs" v-else>请选择</view>
					<i class="iconfont icon-youjiantou"></i>
				</view>
			</view>
		</view>
		<uv-datetime-picker ref="entertainDateRef" v-model="entertainDatePicker" :formatter="formatter" mode="date"
			@confirm="entertainDateConfirm" />

		<view class="picker-content" @tap="outboundTypeFn">
			<view class="measurement-info-list">
				<text class="info-list-left isrequired">出库类型</text>
				<view class="info-list-right">
					<view class="uni-input" v-if="ItemRequisitionList.outboundType">
						{{ ItemRequisitionList.outboundType }}
					</view>
					<view class="uni-inputs" v-else>请选择</view>
					<i class="iconfont icon-youjiantou"></i>
				</view>
			</view>
		</view>
		<uv-picker ref="outboundTypeRef" :columns="outboundTypeColumns" @confirm="outboundTypeConfirm"></uv-picker>
		
		<!-- <view class="picker-content" v-if="ItemRequisitionList.outboundType=='订单出库' ">
			<view class="measurement-info-list">
				<text class="info-list-left isrequired">客户名称</text>
				<view class="info-list-right">
					<view class="info-content">
						<input v-model="ItemRequisitionList.customerName" adjust-position class="uni-input"
							placeholder="请输入" type="text" />
					</view>
				</view>
			</view>
		</view> -->
		<view class="picker-content" @tap="customerNameFn" v-if="ItemRequisitionList.outboundType=='订单出库' ">
			<view class="measurement-info-list">
				<text class="info-list-left isrequired">客户名称</text>
				<view class="info-list-right">
					<view class="uni-input" v-if="ItemRequisitionList.customerName">
						{{ ItemRequisitionList.customerName }}
					</view>
					<view class="uni-inputs" v-else>请选择</view>
					<i class="iconfont icon-youjiantou"></i>
				</view>
			</view>
		</view>
		<uv-picker ref="customerNameRef" :columns="customerNameColumns" @confirm="customerNameConfirm"></uv-picker>
		
		<view class="picker-content" v-if="ItemRequisitionList.outboundType=='订单出库' ">
			<view class="measurement-info-list">
				<text class="info-list-left isrequired">客户联系人</text>
				<view class="info-list-right">
					<view class="info-content">
						<input v-model="ItemRequisitionList.customerPerson" adjust-position class="uni-input"
							placeholder="请输入" type="text" />
					</view>
				</view>
			</view>
		</view>
		<view class="picker-content" v-if="ItemRequisitionList.outboundType=='订单出库' ">
					<view class="measurement-info-list">
						<text class="info-list-left isrequired">客户地址</text>
						<view class="info-list-right">
							<view class="info-content">
								<input v-model="ItemRequisitionList.customerAddress" adjust-position class="uni-input"
									placeholder="请输入" type="text" />
							</view>
						</view>
					</view>
				</view>
				<view class="picker-content" v-if="ItemRequisitionList.outboundType=='订单出库' ">
					<view class="measurement-info-list">
						<text class="info-list-left isrequired">单据编号</text>
						<view class="info-list-right">
							<view class="info-content">
								<input v-model="ItemRequisitionList.receiptNumber" adjust-position class="uni-input"
									placeholder="请输入" type="text" />
							</view>
						</view>
					</view>
				</view>

<view class="picker-content" v-if="ItemRequisitionList.outboundType=='行政出库' ">
			<view class="measurement-info-list">
				<text class="info-list-left isrequired">领用人</text>
				<view class="info-list-right">
					<view class="info-content">
						<input v-model="ItemRequisitionList.recipient" adjust-position class="uni-input"
							placeholder="请输入" type="text" />
					</view>
				</view>
			</view>
		</view>

		<view class="picker-content" v-if="ItemRequisitionList.outboundType=='行政出库' ">
			<view class="measurement-info-list">
				<text class="info-list-left isrequired">所属部门</text>
				<view class="info-list-right">
					<view class="info-content">
						<input v-model="ItemRequisitionList.department" adjust-position class="uni-input"
							placeholder="请输入" type="text" />
					</view>
				</view>
			</view>
		</view>



		<view class="picker-content" @tap="outboundWarehouseFn">
			<view class="measurement-info-list">
				<text class="info-list-left isrequired">出库仓库</text>
				<view class="info-list-right">
					<view class="uni-input" v-if="ItemRequisitionList.outboundWarehouse">
						{{ ItemRequisitionList.outboundWarehouse }}
					</view>
					<view class="uni-inputs" v-else>请选择</view>
					<i class="iconfont icon-youjiantou"></i>
				</view>
			</view>
		</view>
		<uv-picker ref="outboundWarehouseRef" :columns="outboundWarehouseColumns"
			@confirm="outboundWarehouseConfirm"></uv-picker>

       <!-- <view class="picker-content">
       	<view class="measurement-info-list">
       		<text class="info-list-left isrequired">出库对象</text>
       		<view class="info-list-right">
       			<view class="info-content">
       				<input v-model="ItemRequisitionList.outboundObject" adjust-position class="uni-input"
       					placeholder="请输入" type="text" />
       			</view>
       		</view>
       	</view>
       </view> -->
	   <view class="picker-content" @tap="outboundObjectFn">
	   	<view class="measurement-info-list">
	   		<text class="info-list-left isrequired">出库对象</text>
	   		<view class="info-list-right">
	   			<view class="uni-input" v-if="ItemRequisitionList.outboundObject">
	   				{{ ItemRequisitionList.outboundObject }}
	   			</view>
	   			<view class="uni-inputs" v-else>请选择</view>
	   			<i class="iconfont icon-youjiantou"></i>
	   		</view>
	   	</view>
	   </view>
	   <uv-picker ref="outboundObjectRef" :columns="outboundObjectColumns"
	   	@confirm="outboundObjectConfirm"></uv-picker>

		<view class="picker-content">
			<view class="measurement-info-list">
				<text class="info-list-left isrequired">管理员</text>
				<view class="info-list-right">
					<view class="info-content">
						<input v-model="ItemRequisitionList.administrator" adjust-position class="uni-input"
							placeholder="请输入" type="text" />
					</view>
				</view>
			</view>
		</view>

<view class="picker-content">
			<view class="measurement-info-list">
				<text class="info-list-left isrequired">申请人</text>
				<view class="info-list-right">
					<view class="info-content">
						<input v-model="ItemRequisitionList.proposer" adjust-position class="uni-input"
							placeholder="请输入" type="text" />
					</view>
				</view>
			</view>
		</view>

		<view class="picker-content">
			<view class="measurement-info-list">
				<text class="info-list-left isrequired">联系电话</text>
				<view class="info-list-right">
					<view class="info-content">
						<input v-model="ItemRequisitionList.phone" adjust-position class="uni-input" placeholder="请输入"
							type="text" />
					</view>
				</view>
			</view>
		</view>


		<view class="detail-itemRequisition" v-for="(item, index) in ItemRequisitionList.itemRequisitionDetail"
			:key="index">
			<view class="detail-item">
				<p style="color: #86909C">出库申请单明细{{index+1}}</p>
				<p class="detail-utils">
					<text @tap="copyDetailItem">复制</text>
					<text @tap="deleteDetailItem(index)"
						v-if="ItemRequisitionList.itemRequisitionDetail.length > 1">删除</text>
				</p>
			</view>

			<view class="picker-content" @tap="inventoryNameFn(index)">
				<view class="measurement-info-list">
					<text class="info-list-left isrequired">存货名称</text>
					<view class="info-list-right">
						<view class="uni-input" v-if="item.inventoryName">{{ item.inventoryName }}
						</view>
						<view class="uni-inputs" v-else>请选择</view>
						<i class="iconfont icon-youjiantou"></i>
					</view>
				</view>
			</view>
			<uv-picker ref="inventoryNameRef" :columns="inventoryNameColumns"
				@confirm="inventoryNameConfirm"></uv-picker>

			<!-- <view class="picker-content">
				<view class="measurement-info-list">
					<text class="info-list-left isrequired">型号规格</text>
					<view class="info-list-right">
						<view class="info-content">
							<input adjust-position type="text" class="uni-input" placeholder="请输入"
								v-model="item.specs" />
						</view>
					</view>
				</view>
			</view> -->
			<view class="picker-content" @tap="specsFn(index)">
				<view class="measurement-info-list">
					<text class="info-list-left isrequired">规格型号</text>
					<view class="info-list-right">
						<view class="uni-input" v-if="item.specs">{{ item.specs }}
						</view>
						<view class="uni-inputs" v-else>请选择</view>
						<i class="iconfont icon-youjiantou"></i>
					</view>
				</view>
			</view>
			<uv-picker ref="specsRef" :columns="specsColumns"
				@confirm="specsConfirm"></uv-picker>
				
			<!-- <view class="picker-content">
				<view class="measurement-info-list">
					<text class="info-list-left isrequired">单位</text>
					<view class="info-list-right">
						<view class="info-content">
							<input adjust-position type="text" class="uni-input" placeholder="请输入"
								v-model="item.unit" />
						</view>
					</view>
				</view>
			</view> -->
			<view class="picker-content" @tap="unitFn(index)">
				<view class="measurement-info-list">
					<text class="info-list-left isrequired">单位</text>
					<view class="info-list-right">
						<view class="uni-input" v-if="item.unit">{{ item.unit }}
						</view>
						<view class="uni-inputs" v-else>请选择</view>
						<i class="iconfont icon-youjiantou"></i>
					</view>
				</view>
			</view>
			<uv-picker ref="unitRef" :columns="unitColumns"
				@confirm="unitConfirm"></uv-picker>
				
			<view class="picker-content">
				<view class="measurement-info-list">
					<text class="info-list-left isrequired">数量</text>
					<view class="info-list-right">
						<view class="info-content">
							<input adjust-position type="text" class="uni-input" placeholder="请输入"
								v-model="item.outboundNumber" />
						</view>
					</view>
				</view>
			</view>


			<!-- <view class="picker-content">
			  <view class="measurement-info-list">
			    <text class="info-list-left isrequired">金额</text>
			    <view class="info-list-right">
			      <view class="info-content" style="display: flex; align-items: center">
			        <input
			          adjust-position
			          type="text"
			          class="uni-input"
			          placeholder="请输入"
			          v-model="item.goodsMoney"
			        />
			        <p style="font-size: 28rpx; line-height: 1.4em">元</p>
			      </view>
			    </view>
			  </view>
			</view> -->

			<!-- <view class="textarea-box">
        <text class="info-list-left isrequired">采购用途</text>
        <textarea
          v-model="item.goodsPurpose"
          class="textinfo-list"
          placeholder="请输入"
        ></textarea>
      </view> -->

		</view>

		<!-- <view class="picker-content">
			<view class="measurement-info-list">
				<text class="info-list-left isrequired">采购总金额</text>
				<view class="info-list-right">
					<view class="info-content" style="display: flex; align-items: center">
						<input adjust-position type="text" class="uni-input" placeholder="请输入"
							v-model="ItemRequisitionList.purchaseMoney" />
						<p style="font-size: 28rpx; line-height: 1.4em">元</p>
					</view>
				</view>
			</view>
		</view> -->

		<view class="textarea-box">
			<text class="info-list-left">备注</text>
			<textarea v-model="ItemRequisitionList.remark" class="textinfo-list" placeholder="请输入"></textarea>
		</view>

		<!--    说明附件-->
		<!-- <DescriptionAttachment @getDesignDrawingsEmit="getDesignDrawingsEmit"/> -->
		<!--    审批流程-->
		<AuditApplicationSteps :ruleId="'caigou'" :outboundType="outboundTypeNumParams"
			 />
			 <!-- :purchaseMoney="ItemRequisitionList.purchaseMoney" -->
		<!--    底部占位符-->
		<view class="blank"></view>
		<!--    保存-->
		<view class="buttonContainer">
			<button class="buttonClass" @click="clickSave">提交</button>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	@import '@/static/style/index.scss';

	.bukaSvg {
		width: 32rpx;
		height: 32rpx;
	}

	.buttonContainer {
		position: fixed;
		bottom: 0;
		display: flex;
		justify-content: center;
		width: 100%;
		align-items: center;
		padding: 16rpx;
		background-color: #fff;
	}

	.buttonClass {
		display: flex;
		width: 686rpx;
		height: 72rpx;
		justify-content: center;
		align-items: center;
		background: #165dff;
		border-radius: 16rpx;
		color: #fff;
		font-size: 32rpx;
		//margin-top: 40rpx;
		overflow: hidden;
	}

	.uni-inputs {
		color: #86909c !important;
	}

	.uni-input {
		text-align: right;
		font-size: 28rpx;
	}

	.blank {
		height: calc(72rpx + 32rpx + 20rpx);
	}

	.textarea-box {
		background: #fff;
		padding: 20rpx;
		margin-top: 20rpx;

		.info-list-left {
			// @include font-color-auxiliary;
			color: #1d2129;
			font-size: $font-size-base;
		}

		.textinfo-list {
			margin-top: 20rpx;
			width: 100%;
			height: 200rpx;
		}
	}

	.bukabanci {
		.info-content {
			color: #86909c !important;
		}

		.info-list-left {
			// @include font-color-auxiliary;
			color: #86909c !important;
		}
	}

	.textarea-box {
		background: #fff;
		padding: 20rpx;
		margin-top: 20rpx;

		.info-list-left {
			// @include font-color-auxiliary;
			color: #1d2129;
			font-size: $font-size-base;
		}

		.textinfo-list {
			margin-top: 20rpx;
			width: 100%;
			height: 200rpx;
		}
	}

	.popup-content {
		background: #f7f8fa;

		.header-box {
			padding: 30rpx 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			p {
				color: #1d2129;
				font-size: 34rpx;
				font-weight: 500;
			}

			.module-image-ba {
				border-radius: 32rpx;
				background: #f2f3f5;
				width: 45rpx;
				height: 45rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 32rpx;
					height: 32rpx;
				}
			}
		}

		.card-list {
			display: flex;
			align-items: center;
			flex-direction: column;
			padding: 20rpx 30rpx;
			box-sizing: border-box;

			.list {
				box-shadow: 0 4rpx 16rpx 0 #0000000d;
				box-sizing: border-box;
				width: 100%;
				background: #fff;
				padding: 16rpx 24rpx;
				border-radius: 8rpx;
				margin-bottom: 10rpx;

				h4 {
					color: #1d2129;
					font-size: 32rpx;
					font-weight: 400;
				}

				p {
					color: #86909c;
					font-size: 24rpx;
					font-weight: 400;
					margin-top: 10rpx;
				}
			}
		}
	}

	.detail-itemRequisition {
		.detail-item {
			padding: 10rpx 30rpx;
			@include flex($align: center, $justify: space-between);

			.detail-utils {
				@include flex($align: center, $justify: space-between);
				width: 150rpx;
				color: #165DFF;
			}


		}

		.text-info {
			color: #86909C;
			padding: 20rpx 30rpx;
			display: inline-block;
		}
	}


	.measurement-info-list {
		@include flex($align: center, $justify: space-between);
		padding: $spacing-row-base;
		background: #fff;
		margin-top: 16rpx;

		.info-list-left {
			// @include font-color-auxiliary;
			color: #1d2129;
			font-size: $font-size-base;
		}

		.info-list-right {
			@include flex($align: center);

			.info-content {
				@include textStyleBase;
				font-size: 34rpx;
			}

			.iconfont {
				margin-left: 16rpx;
				// @include font-color-auxiliary;
				color: $uni-fc-fu-lin;
			}
		}

		.unit {
			// @include font-color-auxiliary;
			color: $uni-fc-fu-lin;
		}
	}
</style>